<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 模块快速使用</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

<!--  <style>-->
<!--    /* 偶数行背景色 */-->
<!--    .layui-table[lay-even] tr:nth-child(even) {-->
<!--        /* background-color: #aaffaa; */-->
<!--        background-color: #eeffee;-->
<!--    }-->

<!--    /* 鼠标指向表格时,奇数行背景颜色 */-->
<!--    .layui-table tbody tr:hover,.layui-table-hover {-->
<!--        background-color: #eeffee;-->
<!--    }-->

<!--    /* 表格头部工具栏背景色 */-->
<!--    .layui-table-tool {-->
<!--        background-color: #eeffee;-->
<!--    }-->

<!--    /* 表格头部背景色 */-->
<!--    th {-->
<!--        background-color: #359f6a; /* MediumSeaGreen */-->
<!--        color: #fff;-->
<!--        font-weight: bold-->
<!--    }-->
<!--  </style>-->
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script src="/static/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,toolbar: true
    // ,height: 312
    // ,even: true//控制隔行变颜色
    ,url: '/get_1_4' //数据接口
    ,page: false //开启分页
    ,cols: [[ //表头
      {field: 'type', title: '类型', width:100, fixed: 'left'}
      ,{field: 'SiO2', title: '二氧化硅(SiO2)', width:100}
      ,{field: 'Na2O', title: '氧化钠(Na2O)', width:100}
      ,{field: 'K2O', title: '氧化钾(K2O)', width:100}
      ,{field: 'CaO', title: '氧化钙(CaO)', width: 100}
      ,{field: 'MgO', title: '氧化镁(MgO)', width:100}
      ,{field: 'Al2O3', title: '氧化铝(Al2O3)', width:100}
      ,{field: 'Fe2O3', title: '氧化铁(Fe2O3)', width:100}
      ,{field: 'CuO', title: '氧化铜(CuO)', width: 100}
      ,{field: 'PbO', title: '氧化铅(PbO)', width:100}
      ,{field: 'BaO', title: '氧化钡(BaO)', width:100}
      ,{field: 'P2O5', title: '五氧化二磷(P2O5)', width:100}
      ,{field: 'SrO', title: '氧化锶(SrO)', width: 100}
      ,{field: 'SnO2', title: '氧化锡(SnO2)', width:100}
      ,{field: 'SO2', title: '二氧化硫(SO2)', width: 100}
    ]]
  });

});
</script>
</body>
</html>